<template>
	<div v-show="total">
		<label>
			<input type="checkbox" v-model="isAll" />
		</label>
		<span>
			已完成{{doneTotal}} / 全部{{total}}
		</span>
		<button @click="clearAll">清楚已完成</button>
	</div>
</template>
<script>
	export default {
		name: 'toDo',
		props: ['todos', 'checkAllTodo', 'clearAllTodo'],
		computed: {
			total(){
				return this.todos.length;
			},
			doneTotal() {
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0), 0)
			},
			isAll: {
				get(){
					return this.do === this.total && this.checkAllTodo(value)
				}
			}
		},
		methods: {
			clearAll(){
				this.clearAllTodo()
			}
		}
	}
</script>
<style></style>